<template>
	<div>
		<div style="display: flex;justify-content: space-between;">
			<el-button type="primary" icon="el-icon-plus" @click="showAddSalaryView">添加工资账套</el-button>
			<el-button type="success" icon="el-icon-refresh" @click="initSalaries"></el-button>
		</div>
		<div style="margin-top: 10px;">
			<el-table
			:data="salaries"
			border
			stripe
			>
				<el-table-colum
					type="selection"
					width="40"
				>
				</el-table-colum>
				<el-table-column
				    prop="name"
				    label="账套名称"
				    width="120">
				</el-table-column>
				<el-table-column
				    prop="basicSalary"
				    label="基本工资"
				    width="70">
				</el-table-column>
				<el-table-column
				    prop="trafficSalary"
				    label="交通补助"
				    width="70">
				</el-table-column>
				<el-table-column
				    prop="lunchSalary"
				    label="午餐补助"
				    width="70">
				</el-table-column>
				<el-table-column
				    prop="bonus"
				    label="奖金"
				    width="70">
				</el-table-column>
				<el-table-column
				    prop="createDate"
				    label="启用时间"
				    width="100">
				</el-table-column>
				<!-- 多级表头：el-table-column 里面嵌套 el-table-column，就可以实现多级表头  -->
				<el-table-column
				    label="养老金"
				    align="center">
				  <el-table-column
				      prop="pensionPer"
				      label="比率"
				      width="70">
				  </el-table-column>
				  <el-table-column
				      prop="pensionBase"
				      label="基数"
				      width="70">
				  </el-table-column>
				</el-table-column>
				<!-- 多级表头 -->
				<el-table-column
				    label="医疗保险"
				    align="center">
				  <el-table-column
				      prop="medicalPer"
				      label="比率"
				      width="70">
				  </el-table-column>
				  <el-table-column
				      prop="medicalBase"
				      label="基数"
				      width="70">
				  </el-table-column>
				</el-table-column>
				<!-- 多级表头 -->
				<el-table-column
				    label="公积金"
				    align="center">
				  <el-table-column
				      prop="accumulationFundPer"
				      label="比率"
				      width="70">
				  </el-table-column>
				  <el-table-column
				      prop="accumulationFundBase"
				      label="基数"
				      width="70">
				  </el-table-column>
				</el-table-column>
				<el-table-column
				    label="操作">
				  <!-- 5-1 删除工资账套 拿到当前行数据 绑定点击事件 传行数据-->
				  <template slot-scope="scope">
				    <!-- 6-4 @click="showEditSalaryView(scope.row)">编辑  -->
				    <el-button type="primary" size="mini" @click="showEditSalaryView(scope.row)">编辑</el-button>
				    <el-button type="danger" size="mini" @click="deleteSalary(scope.row)">删除</el-button>
				  </template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog
			:title="dialogTitle"
			:visible.sync="dialogVisible"
			width="50%">
			<div style="display: flex;justify-content: space-around;align-items: center;">
				<el-steps direction="vertical" :active="activeItem">
					<el-step :title="item" v-for="(item,index) in salaryItemName" :key="index"></el-step>
				</el-steps>
				<el-input 
					@keydown.enter.native="nextSetp"
					v-model="salary[title]"
					:placeholder="'请输入'+salaryItemName[index]+'...'"
					v-for="(value,title,index) in salary" 
					:key="index" 
					v-show="activeItem==index"
					style="width: 200px;"
					></el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="preStep">{{activeItem==10?'取消':'上一步'}}</el-button>
				<el-button type="primary" @click="nextSetp">{{activeItem==10?'完成':'下一步'}}</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		name:"SalSob",
		data(){
			return{
				dialogTitle:'',
				dialogVisible:false,
				salaries:[],
				activeItem:0,
				salaryItemName: [ // 3-2 步骤条数据对象
				  '账套名称',
				  '基本工资',
				  '交通补助',
				  '午餐补助',
				  '奖金',
				  '养老金比率',
				  '养老金基数',
				  '医疗保险比率',
				  '医疗保险基数',
				  '公积金比率',
				  '公积金基数'
				],
				// 4-1 定义工资账套数据
				salary: {
				  name: '',
				  basicSalary: 0,
				  trafficSalary: 0,
				  lunchSalary: 0,
				  bonus: 0,
				  pensionPer: 0.0,
				  pensionBase: 0,
				  medicalPer: 0.0,
				  medicalBase: 0,
				  accumulationFundPer: 0.0,
				  accumulationFundBase: 0
				}
			}
		},
		methods:{
			showEditSalaryView(data){
				this.dialogTitle='编辑工资账套'
				this.dialogVisible=true
				this.activeItem=0
				this.salary.id = data.id
				this.salary.name = data.name
				this.salary.basicSalary = data.basicSalary
				this.salary.trafficSalary = data.trafficSalary
				this.salary.lunchSalary = data.lunchSalary
				this.salary.bonus = data.bonus
				this.salary.pensionPer = data.pensionPer
				this.salary.pensionBase = data.pensionBase
				this.salary.medicalPer = data.medicalPer
				this.salary.medicalBase = data.medicalBase
				this.salary.accumulationFundPer = data.accumulationFundPer
				this.salary.accumulationFundBase = data.accumulationFundBase
			},
			deleteSalary(row){
				this.$confirm('此操作将永久删除【'+row.name+'】, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest('/salary/sob/'+row.id).then(resp=>{
						if(resp){
							this.initSalaries()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			preStep(){
				if(this.activeItem==0){
					 return
				}
				else if(this.activeItem==10){
					this.dialogVisible=false
					return
				}
				this.activeItem--;
			},
			nextSetp(){
				if(this.activeItem==10){
					if(this.salary){
						this.putRequest('/salary/sob/',this.salary).then(resp=>{
							if(resp){
								this.initSalaries()
								this.dialogVisible=false
							}
						})
					}else{
						this.postRequest('/salary/sob/',this.salary).then(resp=>{
						if(resp){
							this.initSalaries()
							this.dialogVisible=false
						}
					 })
					}
					return
				}
				
				this.activeItem++
			},
			showAddSalaryView(){
				this.salary= {
				  name: '',
				  basicSalary: 0,
				  trafficSalary: 0,
				  lunchSalary: 0,
				  bonus: 0,
				  pensionPer: 0.0,
				  pensionBase: 0,
				  medicalPer: 0.0,
				  medicalBase: 0,
				  accumulationFundPer: 0.0,
				  accumulationFundBase: 0
				}
				this.dialogTitle='添加工资账套'
				this.activeItem=0
				this.dialogVisible=true
			},
			initSalaries(){
				this.getRequest('/salary/sob/').then(resp=>{
					if(resp){
						this.salaries=resp
					}
				})
			}
		},
		mounted() {
			this.initSalaries()
		}
	}
</script>

<style>
</style>